<template lang="pug">
.campaign-list
  title-header
    div(
      style="cursor: pointer;",
      @click="$router.push('/spider')",
    ) + 新增

  el-table.campaign-list__table(
    v-loading="loading",
    :data="campaignList",
    style="width: 100%",
  )
    el-table-column(
      prop="id",
      label="ID",
      align="center",
      width="40",
    )
    el-table-column(
      prop="title",
      label="商品名",
      align="center",
      min-width="150",
      show-overflow-tooltip,
    )
    el-table-column(
      prop="sku",
      label="SKU",
      align="center",
    )
    el-table-column(
      prop="url",
      label="URL",
      align="center",
      min-width="140",
      show-overflow-tooltip,
    )
    //- el-table-column(
    //-   prop="created_at",
    //-   label="创建时间",
    //-   align="center",
    //-   min-width="150",
    //-   :formatter="formatDate",
    //- )
    el-table-column(
      prop="updated_at",
      label="最后抓取时间",
      align="center",
      min-width="150",
      :formatter="formatDate",
    )
    el-table-column(
      prop="target_price",
      label="目标价格",
      align="center",
      :formatter="numWithDecimals",
    )
    el-table-column(
      prop="price",
      label="实际价格",
      align="center",
      :formatter="numWithDecimals",
    )
    el-table-column(
      prop="status",
      label="状态",
      align="center",
      :formatter="(r, c, cell) => STATUS[cell]",
    )
    el-table-column(
      label="操作",
      align="center",
    )
      template(slot-scope="scope")
        el-button(
          type="text",
          @click="$router.push('/campaign/' + scope.row.campaign_id)",
          disabled
        ) 编辑
        el-button(
          type="text",
          @click="changeStatus(scope.row)",
        ) {{ scope.row.status ? ' 暂停 ': ' 开启 ' }}
        el-button(
          type="text",
          @click="del(scope.row)",
        ) 删除

  el-pagination.campaign-list__pagination(
    layout="prev, pager, next",
    :total="total",
    :current-page.sync="currentPage",
    @current-change="fetchAndUpdateList",
  )
</template>

<script>
import TitleHeader from "title-header"
import axios from "axios"
import { numWithDecimals } from "filters"
import { format } from "date-fns"

const PAGE_SIZE = 10
const STATUS = {
  'true': "开启",
  'false': "暂停",
}

export default {
  components: {
    TitleHeader,
  },
  data() {
    return {
      campaignList: null,
      loading: false,
      currentPage: 1,
      total: null,
      STATUS,
    }
  },
  mounted() {
    this.fetchAndUpdateList()
  },
  methods: {
    fetchAndUpdateList(page = 1) {
      this.loading = true
      axios
        .get("/spiders", {
          params: {
            page,
          },
        })
        .then(res => {
          this.campaignList = res.data
          this.loading = false
        })
    },
    changeStatus(row) {
      const url = `/spiders/${row.id}/change-status`
      axios
        .post(url)
        .then(res => {
          this.$message.success('状态修改成功')
          row.status = !row.status
        })
    },
    del(row) {
      const url = `/spiders/${row.id}/del`
      this.$confirm("此操作将永久删除该爬虫, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          return axios.post(url)
        })
        .then(res => {
          this.$message.success("删除成功")
          this.fetchAndUpdateList()
        })
        .catch(_ => {
          this.$message("已取消删除")
        })
    },
    delCampaignAndUpdateList(campaign) {
      this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(_ => {
          return axios.get("/business/campaign/pc/delete", {
            params: { campaign_id: campaign.campaign_id },
          })
        })
        .then(res => {
          this.$message.success("删除成功")
          this.fetchAndUpdateList()
        })
        .catch(_ => {
          this.$message("已取消删除")
        })
    },
    numWithDecimals(row, column, cellValue) {
      return numWithDecimals(cellValue)
    },
    formatDate(row, column, cellValue) {
      const a = format(cellValue, "YYYY-MM-DD hh:mm:ss")
      return cellValue
    }
  },
}
</script>

<style lang="stylus">
.campaign-list
  min-width: 1220px

.campaign-list__table
  margin-top: 20px

.campaign-list__pagination
  margin-top: 20px
  float: right
</style>
